<template>
  <div class="dap-page">
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,20, 50, 100]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      'pageTotal': {},
      currentPage:{
        default:1,
      }
    },
    mounted() {

    },
    methods: {
      // 每页显示多少条
      handleSizeChange(val) {
        this.$emit('pageSizeChange', val)
      },
      // 当前页
      handleCurrentChange(val) {
        this.$emit('pageCurrentChange', val)
      }
    },
  }
</script>

<style scoped>
  .dap-page {
    color: red;
    height: 40px;
    display: flex;
    align-items: center;
    background-color: #1b2b44;
    justify-content: flex-end;
    padding-right: 18px;
  }
</style>
<style>
  .el-pagination button, .el-pagination span:not([class*=suffix]) {
    font-size: 12px;
  }

  .el-pagination__total, .el-pagination__jump {
    color: #fff;
  }

  /* 省略点颜色*/
  .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
    font-size: 12px;
    color: #cbcbcb;
  }

  /* 当前页字体颜色 */
  .el-pager li.active {
    color: #0487ff;
  }

  /* 上一页 下一页 按钮禁用的颜色 */
  .el-pagination button.disabled {
    background-color: transparent;
  }

  /* 分页各个按钮 */
  .el-input__inner, .el-pagination .btn-next, .el-pagination .btn-prev, .el-pager li {
    font-size: 12px;
    color: #fff;
    background: transparent;
  }

  /* 切换页数按钮 */
  .el-input__inner {
    border: 1px solid #303c4d;
    background: #11243a;

  }

  .el-select:hover .el-input__inner {
    border-color: #303c4d;
  }

  .el-pagination__sizes .el-input .el-input__inner {
    font-size: 12px;
    font-weight: normal;
  }

  .el-select .el-input__inner:focus {
    border: 1px solid #303c4d;
  }

  .el-pagination__sizes .el-input .el-input__inner:hover {
    border: 1px solid #303c4d;
  }

  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid #303c4d;
  }

  /* 跳转到 */
  .el-input__inner:hover {
    border: 1px solid #303c4d;
  }

  /* 禁用时 */
  .el-pagination button:disabled {
    background-color: transparent;
  }

  /* 下拉框 */
  .el-select-dropdown__list {
    padding: 0;
  }

  .el-select-dropdown {
    background-color: #11243a;
    border: 1px solid #303c4d;
    min-width: 100px !important;
  }

  .el-select-dropdown__item.selected, .el-select-dropdown__item {
    color: #cbcbcb;
    font-size: 12px;
    text-align: center;
    background-color: #11243a;
  }

  /* 下拉框鼠标移入 */
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: #314d7a;
  }

  /* 去掉下拉框时箭头 */
  .el-popper[x-placement^=top] .popper__arrow {
    display: none;
  }

  .el-select-dropdown__item.selected {
    font-weight: normal;
  }
</style>
